<template>
	<view class="about-container">
	  <view class="header-section">
		<view class="title-box">
		  <uni-title type="h2" title="班后工作报告汇总"></uni-title>
		  <view class="subtitle">仅显示班后报告记录</view>
		 
		</view>
	  </view>

	  <!-- 搜索区域 -->
	  <view class="search-section">
		<view class="search-content">
		  <view class="search-row">
			<view class="search-item">
			  <text class="label">用户</text>
			  <view class="input-wrapper">
				<uni-icons type="person" size="18" color="#909399"></uni-icons>
				<input 
				  type="text"
				  class="search-input" 
				  v-model="queryParams.userName" 
				  placeholder="请输入用户名搜索"
				/>
			  </view>
			</view>
			<view class="search-item">
			  <text class="label">日期</text>
			  <view class="input-wrapper">
				<uni-icons type="calendar" size="18" color="#909399"></uni-icons>
				<picker 
				  mode="date" 
				  :value="queryParams.aa" 
				  @change="onDateChange"
				>
				  <view class="picker-value">{{ queryParams.aa || '请选择日期' }}</view>
				</picker>
			  </view>
			</view>
		  </view>
		  <view class="button-group">
			<button class="action-btn reset-btn" @click="handleReset">
			  <uni-icons type="refresh" size="16" color="#909399"></uni-icons>
			  <text>重置</text>
			</button>
			<button class="action-btn search-btn" @click="handleSearch">
			  <uni-icons type="search" size="16" color="#ffffff"></uni-icons>
			  <text>搜索</text>
			</button>
		  </view>
		</view>
	  </view>
	  <view class="subtitle">查看记录</view>

	  <view class="performance-list">
		<view v-if="loading" class="loading">
		  <uni-icons type="spinner-cycle" size="24" color="#409EFF"></uni-icons>
		  <text>加载中...</text>
		</view>
		<view v-else-if="performanceList.length === 0" class="no-data">
		  <uni-icons type="info" size="24" color="#909399"></uni-icons>
		  <text>暂无班后报告数据</text>
		</view>
		<view v-else class="performance-item" v-for="(item, index) in performanceList" :key="index" :style="{ animationDelay: index * 0.1 + 's' }">
		  <view class="item-header">
			<view class="employee-info">
			  <text class="employee-id">名称：{{ item.userName }}</text>
			  <text class="date">{{ item.aa }}</text>
			</view>
			<view class="report-section">
			  <view class="report-header">
				<text class="unit">班后报告</text>
				<!-- <view class="action-buttons">
				  <button class="edit-btn" size="mini" @click="handleEdit(item)">编辑</button>
				</view> -->
			  </view>
			  <view class="report-content" v-if="item.cc">
				<text class="value">{{ item.cc }}</text>
			  </view>
			  <view class="report-content empty" v-else>
				<text class="value">暂无报告</text>
			  </view>
			  
			  <view class="photo-preview report-photo" v-if="item.dd">
				<image :src="item.dd" mode="aspectFill" @click="previewRecordImage(item.dd)" class="preview-image"></image>
			  </view>

			  <!-- 评论区域 -->
			  <view class="comment-section">
				<view class="comment-header">
					<text class="comment-title">评论</text>
					<button v-if="hasRole('admin') || hasRole('guanliceng')" 
						class="comment-btn" 
						@click.stop="handleAddComment(item)"
					>
						<uni-icons type="chat" size="16" color="#409EFF"></uni-icons>
						<text>{{ item.tocc ? '编辑评论' : '添加评论' }}</text>
					</button>
				</view>
				<view class="comment-content" v-if="item.tocc">
					<text class="comment-text">{{ item.tocc }}</text>
				</view>
				<view class="comment-content empty" v-else>
					<text class="comment-text">暂无评论</text>
				</view>
			  </view>
			</view>
		  </view>
		  
		  <!-- 操作按钮区域 -->
		  <view class="item-actions">
			<button class="view-detail-btn" @click="goToDetail(item)">
			  <uni-icons type="eye" size="16" color="#fff"></uni-icons>
			  <text>查看详情</text>
			</button>
		  </view>
		</view>
	  </view>

	  <!-- 评论编辑弹窗 -->
	  <uni-popup ref="commentPopup" type="center">
		<view class="popup-content">
			<view class="popup-header">
				<text class="popup-title">添加评论</text>
				<uni-icons type="close" size="20" color="#909399" @click="closeCommentPopup"></uni-icons>
			</view>
			<view class="popup-body">
				<textarea 
					v-model="commentForm.content" 
					class="comment-textarea"
					placeholder="请输入评论内容"
					:maxlength="200"
				/>
				<view class="comment-footer">
					<text class="word-count">{{ commentForm.content.length }}/200</text>
				</view>
			</view>
			<view class="popup-footer">
				<button class="cancel-btn" @click="closeCommentPopup">取消</button>
				<button class="confirm-btn" @click="submitComment">确定</button>
			</view>
		</view>
	  </uni-popup>
	</view>
  </template>
  
  <script>
  import { listYeji, updateYeji } from '@/api/system/yeji'
  
  export default {
	data() {
	  return {
		loading: false,
		performanceList: [],
		queryParams: {
			pageNum: 1,
			pageSize: 200, // 增加到200条，确保能显示更多当天的记录
			userName: '',
			aa: this.getCurrentDate() // 默认设置为当天日期
		},
		commentForm: {
		  id: null,
		  content: ''
		},
		currentItem: null
	  }
	},
	computed: {
	  hasRole() {
		return (role) => {
		  const roles = uni.getStorageSync('roles') || []
		  return roles.includes(role)
		}
	  }
	},
	onLoad() {
	  this.getTotalPerformance()
	},
	methods: {
	  // 获取当前日期
	  getCurrentDate() {
		const today = new Date()
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	  },
	  getTotalPerformance() {
		this.loading = true
		
		listYeji(this.queryParams).then(res => {
		  if (res.code === 200) {
			// 过滤出班后报告（cc字段有值的记录）
			const banhouReports = res.rows.filter(item => item.cc && item.cc.trim() !== '')
			this.performanceList = banhouReports.reverse()
		  } else {
			this.$modal.msgError(res.msg || '获取数据失败')
		  }
		}).catch(err => {
		  console.error('获取数据失败：', err)
		  this.$modal.msgError('获取数据失败')
		}).finally(() => {
		  this.loading = false
		})
	  },
	  handleSearch() {
		this.getTotalPerformance()
	  },
	  handleReset() {
		this.queryParams.userName = ''
		this.queryParams.aa = this.getCurrentDate() // 重置为当天日期
		this.getTotalPerformance()
	  },
	  onDateChange(e) {
		this.queryParams.aa = e.detail.value
	  },
	  handleEdit(item) {
		// Implement the edit logic here
	  },
	  previewRecordImage(url) {
		if (url) {
			uni.previewImage({
				urls: [url],
				current: url
			});
		}
	  },
	  // 处理添加评论
	  handleAddComment(item) {
		this.currentItem = item
		this.commentForm = {
		  id: item.id,
		  content: item.tocc || ''
		}
		this.$refs.commentPopup.open()
	  },
	  
	  // 关闭评论弹窗
	  closeCommentPopup() {
		this.$refs.commentPopup.close()
		this.commentForm = {
		  id: null,
		  content: ''
		}
		this.currentItem = null
	  },
	  
	  // 提交评论
	  async submitComment() {
		if (!this.commentForm.content.trim()) {
		  this.$modal.msgError('请输入评论内容')
		  return
		}
		try {
		  const updateData = {
			...this.currentItem, // 带上原有所有字段
			tocc: this.commentForm.content.trim()
		  }
		  const res = await updateYeji(updateData)
		  if (res.code === 200) {
			this.$modal.msgSuccess('评论成功')
			this.closeCommentPopup()
			// 刷新列表
			this.getTotalPerformance()
		  } else {
			this.$modal.msgError(res.msg || '评论失败')
		  }
		} catch (error) {
		  console.error('评论失败：', error)
		  this.$modal.msgError('评论失败')
		}
	  },
	  goToDetail(item) {
		uni.navigateTo({
		  url: '/pages/reportDetail/reportDetail?id=' + item.id
		})
	  }
	}
  }
  </script>
  
  <style lang="scss" scoped>
  page {
	background-color: #f5f7fa;
  }
  
  .about-container {
	padding: 30rpx;
	min-height: 100vh;
  }
  
  .header-section {
	margin-bottom: 30rpx;
	
	.title-box {
	  text-align: center;
	  padding: 20rpx 0;
	  
	  :deep(.uni-title) {
		margin-bottom: 0;
		
		.uni-title__text {
		  font-size: 36rpx;
		  font-weight: 600;
		  color: #303133;
		}
		
		.subtitle {
		  font-size: 24rpx;
		  color: #909399;
		  margin-top: 8rpx;
		}
	  }
	}
  }
  
  .subtitle {
	text-align: center;
	font-size: 28rpx;
	color: #909399;
	margin-bottom: 30rpx;
	position: relative;
	padding: 0 30rpx;
	
	&::before,
	&::after {
	  content: '';
	  position: absolute;
	  top: 50%;
	  width: 60rpx;
	  height: 1px;
	  background: #dcdfe6;
	}
	
	&::before {
	  left: 50%;
	  margin-left: 80rpx;
	}
	
	&::after {
	  right: 50%;
	  margin-right: 80rpx;
	}
  }
  
  .search-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

	.search-content {
	  .search-row {
		display: flex;
		gap: 20rpx;
		margin-bottom: 24rpx;

		.search-item {
		  flex: 1;
		  margin-bottom: 0;

		  .label {
			display: block;
			font-size: 26rpx;
			color: #606266;
			margin-bottom: 12rpx;
			font-weight: 500;
		  }

		  .input-wrapper {
			display: flex;
			align-items: center;
			background: #f8f9fa;
			border-radius: 8rpx;
			border: 1px solid #dcdfe6;
			padding: 0 20rpx;
			height: 72rpx;
			transition: all 0.3s ease;

			&:focus-within {
			  border-color: #409EFF;
			  box-shadow: 0 0 0 2px rgba(64,158,255,0.1);
			}

			.uni-icons {
			  margin-right: 12rpx;
			}

			.search-input {
			  flex: 1;
			  height: 100%;
			  font-size: 28rpx;
			  color: #303133;
			  background: transparent;
			  border: none;
			  padding: 0;

			  &::placeholder {
				color: #909399;
			  }
			}

			.picker-value {
			  flex: 1;
			  height: 100%;
			  line-height: 72rpx;
			  font-size: 28rpx;
			  color: #303133;
			  background: transparent;
			}
		  }
		}
	  }

	  .button-group {
		display: flex;
		justify-content: center;
		gap: 24rpx;

		.action-btn {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  min-width: 180rpx;
		  height: 72rpx;
		  font-size: 28rpx;
		  padding: 0 32rpx;
		  border-radius: 8rpx;
		  border: none;
		  transition: all 0.3s ease;

		  .uni-icons {
			margin-right: 8rpx;
		  }

		  &.reset-btn {
			background: #f4f4f5;
			color: #909399;

			&:active {
			  background: #e9e9eb;
			}
		  }

		  &.search-btn {
			background: #409EFF;
			color: #fff;

			&:active {
			  background: #66b1ff;
			}
		  }
		}
	  }
	}
  }
  
  .performance-list {
	.loading, .no-data {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 60rpx 0;
	  color: #909399;
	  font-size: 28rpx;
	  
	  .uni-icons {
		margin-bottom: 20rpx;
	  }
	}
	
	.performance-item {
	  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	  border-radius: 16rpx;
	  padding: 30rpx;
	  margin-bottom: 30rpx;
	  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
	  transform: translateY(0);
	  transition: all 0.3s ease;
	  animation: slideIn 0.5s ease forwards;
	  opacity: 0;
	  
	  &:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	  }
	  
	  // 操作按钮区域
	  .item-actions {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		
		.view-detail-btn {
		  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
		  color: #fff;
		  border: none;
		  border-radius: 6rpx;
		  padding: 8rpx 16rpx;
		  font-size: 22rpx;
		  display: flex;
		  align-items: center;
		  gap: 6rpx;
		  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
		  transition: all 0.3s ease;
		  
		  &:active {
			transform: translateY(1rpx);
			box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.3);
		  }
		  
		  text {
			font-weight: 500;
		  }
		}
	  }
	  
	  .item-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.employee-info {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  
		  .employee-id {
			color: #303133;
			font-size: 30rpx;
			font-weight: 500;
		  }
		  
		  .date {
			color: #909399;
			font-size: 26rpx;
		  }
		}
		
		.report-section {
		  display: flex;
		  flex-direction: column;
		  gap: 10rpx;
		  
		  .report-photo {
			margin-top: 20rpx;
			border-radius: 12rpx;
			overflow: hidden;
			background: #f8f9fa;
			
			.preview-image {
				width: 100%;
				height: 300rpx;
				display: block;
				object-fit: cover;
			}
		  }
		  
		  .unit {
			font-size: 28rpx;
			color: #666;
			font-weight: bold;
		  }
		  
		  .report-content {
			background: #f8f9fa;
			border-radius: 12rpx;
			padding: 20rpx;
			max-height: 200rpx;
			overflow-y: auto;
			
			&.empty {
			  background: #f5f7fa;
			  .value {
				color: #909399;
			  }
			}
			
			.value {
			  font-size: 28rpx;
			  color: #333;
			  line-height: 1.6;
			  white-space: pre-wrap;
			  word-break: break-all;
			}
			
			&::-webkit-scrollbar {
			  width: 6rpx;
			}
			
			&::-webkit-scrollbar-thumb {
			  background-color: #dcdfe6;
			  border-radius: 3rpx;
			}
			
			&::-webkit-scrollbar-track {
			  background-color: #f5f7fa;
			}
		  }
		}
	  }
	}
  }
  
  @keyframes slideIn {
	from {
	  opacity: 0;
	  transform: translateY(20rpx);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .comment-section {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1px solid #ebeef5;
	
	.comment-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 16rpx;
	  
	  .comment-title {
		font-size: 28rpx;
		color: #666;
		font-weight: bold;
	  }
	  
	  .comment-btn {
		display: flex;
		align-items: center;
		background: none;
		border: none;
		padding: 0;
		font-size: 26rpx;
		color: #409EFF;
		
		.uni-icons {
		  margin-right: 8rpx;
		}
		
		&::after {
		  display: none;
		}
	  }
	}
	
	.comment-content {
	  background: #f8f9fa;
	  border-radius: 12rpx;
	  padding: 20rpx;
	  min-height: 80rpx;
	  
	  &.empty {
		background: #f5f7fa;
		.comment-text {
		  color: #909399;
		}
	  }
	  
	  .comment-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		white-space: pre-wrap;
		word-break: break-all;
	  }
	}
  }
  
  .popup-content {
	background: #fff;
	border-radius: 16rpx;
	width: 600rpx;
	padding: 30rpx;
	
	.popup-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 30rpx;
	  
	  .popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #303133;
	  }
	}
	
	.popup-body {
	  .comment-textarea {
		width: 100%;
		height: 240rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border: 1px solid #dcdfe6;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		box-sizing: border-box;
		
		&:focus {
		  border-color: #409eff;
		  background: #fff;
		}
	  }
	  
	  .comment-footer {
		text-align: right;
		margin-top: 12rpx;
		
		.word-count {
		  font-size: 24rpx;
		  color: #909399;
		}
	  }
	}
	
	.popup-footer {
	  display: flex;
	  justify-content: flex-end;
	  gap: 20rpx;
	  margin-top: 30rpx;
	  
	  button {
		min-width: 160rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		border: none;
		
		&.cancel-btn {
		  background: #f4f4f5;
		  color: #909399;
		  
		  &:active {
			background: #e9e9eb;
		  }
		}
		
		&.confirm-btn {
		  background: #409EFF;
		  color: #fff;
		  
		  &:active {
			background: #66b1ff;
		  }
		}
		
		&::after {
		  display: none;
		}
	  }
	}
  }
  </style>
  